<template>
    <div class="flex flex-col h-screen text-sm bg-gray-100">
        <div class="shrink-0">
            <Topbar class="text-white bg-gradient-to-tr from-red-500 to-red-300">
                <template #left>
                    <Back class="!bg-transparent"/>
                </template>
                <div v-if="showNavbarAddress" class="text-xs line-clamp-1">
                    地球亚洲中国山西临汾古县岳阳镇文化节地球亚洲中国山西临汾古县岳阳镇文化节
                </div>
                <div v-else>
                    填写订单
                </div>
                <template #right>
                    <div class="ml-2">
                        <IIon:location-outline />
                    </div>
                </template>
            </Topbar>
        </div>
        <div class="pb-4 space-y-4 overflow-y-auto grow">
            <div ref="addressRef">
                <Address />
            </div>
            <Cart />
            <Detail />
            <Pay />
        </div>
        <div class="flex items-center justify-between px-4 py-2 bg-white shrink-0">
            <div class="text-red-500">
                <span class="text-sm">¥</span>
                <span class="text-2xl ">199</span>
            </div>
            <div class="px-4 py-2 text-white bg-red-500 rounded-lg" @click="submit">
                提交订单
            </div>
        </div>
        <div class="bg-white safe-area-inset-bottom"></div>
    </div>
</template>
    
<script setup lang='ts'>
import { useIntersectionObserver } from '@vueuse/core';
import Address from './components/address.vue'
import Cart from './components/cart.vue';
import Detail from './components/defail.vue'
import Pay from './components/pay.vue'
import orderData from './order';
const addressRef = ref()
const showNavbarAddress = ref(false);
const order = ref(orderData)
const router = useRouter()
provide('order', order)
const submit = () => {
    //创建订单
    // 唤起支付
    //支付成功页面和订单详情页
    router.push({
        name: 'order-payresult',
        params: {
            id: 1
        }
    })
    // router.replace({
    //     name:'me-order-detail',
    //     params:{
    //         id:1
    //     }
    // })
}
onMounted(() => {
    useIntersectionObserver(
        addressRef.value,
        ([{ isIntersecting }]) => {
            showNavbarAddress.value = !isIntersecting;
        }
    )
})
</script>
    
<style></style>